<template>
  <div class="home">
    <div class="about">
      <div class="head">
        <div class="top">
          <div @click="$router.go(-1)" style="width: 60px">
            <img src="../../assets/imageZhaoPin/返回黑@2x.png" alt="" />
            <span>返回</span>
          </div>
          <div>
            <span style="font-size: 17px" v-if="active == 0">求职发布</span>
            <span style="font-size: 17px" v-else-if="active == 1"
              >招聘发布</span
            >
          </div>
          <div @click="$router.push('goqiu')" v-if="active == 0">
            <span style="color: #1da4f2">新建求职</span>
          </div>
          <div @click="$router.push('gozhao')" v-else-if="active == 1">
            <span style="color: #1da4f2">新建招聘</span>
          </div>
        </div>
        <div class="top2">
          <van-dropdown-menu active-color="#1DA4F2">
            <van-dropdown-item
              v-model="value1"
              :options="option1"
              title="期望薪资"
              @change="xiu1()"
            />
            <van-dropdown-item
              title="工作地点"
              ref="item"
              @open="xiu()"
            ></van-dropdown-item>
            <van-dropdown-item
              v-model="value2"
              :options="option2"
              title="发布日期"
              @change="xiu2()"
            />
          </van-dropdown-menu>
          <van-popup
            v-model="show1"
            round
            position="bottom"
            :style="{ height: '46%', backgroundColor: '#fff' }"
            @close="xx"
            class="sxaa"
          >
            <van-area
              title="标题"
              :area-list="areaList"
              @confirm="onAreaConfirm"
              @cancel="show1 = false"
            />
          </van-popup>
        </div>
      </div>
	  <!-- 对应的滚动事件 -->
      <div class="main1" v-if="active == 0" @scroll="scrollBox($event)" ref="gaodu">
        <div
          class="main"
          v-for="(item, k) in vshow"
          :key="k"
          @click="goxiang($event, k)"
        >
          <div class="fath">
            <div class="left">
              <img src="../../assets/imageZhaoPin/求@2x.png" alt="" />
            </div>
            <div class="center">
              <h3>{{ item.POSITION }}</h3>
              <p>
                <span>{{ item.NAME }}</span>
                <span v-if="item === 1">男</span>
                <span v-else>女</span>
                <span>{{ item.AGE }}岁</span>
              </p>
              <p>工作年限: {{ item.YEARS }}年</p>
              <p class="ssx">能力描述: {{ item.SKILL }}</p>
            </div>
            <div class="right">
              <p style="margin-bottom: 40px">
                {{ item.SALARY1 / 1000 }}k-{{ item.SALARY2 / 1000 }}k
              </p>
              <span>{{ item.DISTRICT }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="main1" v-else-if="active == 1">
        <div
          class="main"
          v-for="(item, k) in vshow"
          :key="k"
          @click="goxiang1($event, k)"
        >
          <div class="fath">
            <div class="left">
              <img src="../../assets/imageZhaoPin/聘@2x.png" alt="" />
            </div>
            <div class="center">
              <h3>{{ item.POSITION }}</h3>
              <p>
                <span>{{ item.COMPANY }}</span>
                <!-- <span v-if="item===1">男</span>
                <span v-else>女</span>
                <span>{{item.AGE}}岁</span> -->
              </p>
              <p>工作年限: {{ item.YEARS }}</p>
              <p class="ssx">岗位要求: {{ item.REQUIREMENT }}</p>
            </div>
            <div class="right">
              <p style="margin-bottom: 40px">
                {{ item.SALARY1 / 1000 }}k-{{ item.SALARY2 / 1000 }}k
              </p>
              <span>{{ item.DISTRICT }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-if="active==0">
xx
    </div>
    <div v-else-if="active==1">
aa
    </div> -->
    <van-tabbar
      route
      active-color="#1DABF2"
      inactive-color="#ccc"
      v-model="active"
      class="xs"
      @change="vv(active)"
    >
      <van-tabbar-item>
        <img src="../../assets/imageZhaoPin/求职信息选中@2x.png" v-if="active === 0" />
        <img src="../../assets/imageZhaoPin/求职信息未选中@2x.png" v-else />
        <span v-if="active == 0" style="color: #1dabf2"> 求职信息</span>
        <span v-else-if="active == 1" style="color: #ccc"> 求职信息</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <img src="../../assets/imageZhaoPin/招聘信息选中@2x.png" v-if="active === 1" />
        <img src="../../assets/imageZhaoPin/招聘信息未选中@2x.png" v-else />
        <span v-if="active == 0" style="color: #ccc"> 招聘信息</span>
        <span v-else-if="active == 1" style="color: #1dabf2"> 招聘信息</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import AeraInfo from '../../assets/UseJS/area.js'
import { listServiceXiangmu, frontindex, listPeople } from '../../apiZhaoPin/api'

export default {
  data () {
    return {
      active: 0,
      img1: require('../../assets/imageZhaoPin/下拉@2x.png'),
      img2: require('../../assets/imageZhaoPin/上拉@2x.png'),
      value1: 0,
      value2: 'a',
      option1: [
        { text: '不限', value: 0 },
        { text: '3k以下', value: 1 },
        { text: '3k-5k', value: 2 },
        { text: '5k-10k', value: 3 },
        { text: '10k以上', value: 4 }
      ],
      option2: [
        { text: '不限', value: 'a' },
        { text: '当天发布', value: 'b' },
        { text: '7天内发布', value: 'c' },
        { text: '15天内发布', value: 'd' }
      ],
      show1: false,
      areaList: AeraInfo,
      arrArea: [],
      va1: '',
      va2: '',
      addrInfo: '',
      vshow: [],
      sheng: '',
      shi: '',
      qu: '',

      num: 1,
      size: 20,
      show: false,
      totalPage: ''
    }
  },
  methods: {
    xx () {
      if (this.active == 0) {
        listServiceXiangmu({
          SALARY: this.va1,
          ADDRESS: this.addrInfo,
          PAGE: 0,
          DATE: this.va2,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
      } else if (this.active == 1) {
        listPeople({
          SALARY: this.va1,
          ADDRESS: this.addrInfo,
          PAGE: 0,
          DATE: this.va2,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
      }
    },
    // 孙蒙召
    scrollToTop () {
      // 获取滚动的距离
	  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
	  console.log(scrollTop, '111111111111111111')
	  // 打印出对应元素的高度
	  console.log(this.$refs.gaodu.clientHeight)
    },
    onAreaConfirm (val) {
      this.show1 = false
      this.arrArea = val
      console.log(this.arrArea)

      // 获取地区
      var addrInfo = val[0].name + ',' + val[1].name + ',' + val[2].name
      this.addrInfo = addrInfo
      // console.log(this.addrInfo);
      var str = JSON.stringify({ addr: this.addrInfo })
      localStorage.addr = str
    },
    xiu () {
      console.log(111)
      this.show1 = true
    },
    goxiang (e, k) {
      this.$router.push('qiuxiang?id=' + this.vshow[k].EMPLOYEE_ID)
    },
    goxiang1 (e, k) {
      this.$router.push('zhaoxiang?ip=' + this.vshow[k].EMPLOY_ID)
    },
    xiu1 () {
      console.log(this.value1)
      if (localStorage.addr == undefined || localStorage.addr == '') {
        this.sheng = sessionStorage.province
        this.shi = sessionStorage.city
        this.qu = sessionStorage.discrect
        this.addrInfo = this.sheng + ',' + this.shi + ',' + this.qu
      } else {
        this.addrInfo = JSON.parse(localStorage.addr).addr
      }

      if (this.value1 == 0) {
        this.va1 = null
      } else {
        this.va1 = this.value1
      }

      if (this.active == 0) {
        listServiceXiangmu({
          SALARY: this.va1,
          ADDRESS: this.addrInfo,
          PAGE: 0,
          DATE: this.va2,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
      } else if (this.active == 1) {
        listPeople({
          SALARY: this.va1,
          ADDRESS: this.addrInfo,
          PAGE: 0,
          DATE: this.va2,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
      }
    },
    xiu2 () {
      console.log(this.value1)
      if (localStorage.addr == undefined || localStorage.addr == '') {
        this.sheng = sessionStorage.province
        this.shi = sessionStorage.city
        this.qu = sessionStorage.discrect
        this.addrInfo = this.sheng + ',' + this.shi + ',' + this.qu
      } else {
        this.addrInfo = JSON.parse(localStorage.addr).addr
      }
      if (this.value2 == 'a') {
        this.va2 = 0
      } else if (this.value2 == 'b') {
        this.va2 = 1
      } else if (this.value2 == 'c') {
        this.va2 = 2
      } else if (this.value2 == 'd') {
        this.va2 = 3
      }
      if (this.active == 0) {
        listServiceXiangmu({
          SALARY: this.va1,
          ADDRESS: this.addrInfo,
          PAGE: 0,
          DATE: this.va2,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
      } else if (this.active == 1) {
        listPeople({
          SALARY: this.va1,
          ADDRESS: this.addrInfo,
          PAGE: 0,
          DATE: this.va2,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
      }
    },
    vv (e) {
      this.show1 = false
      var str = JSON.stringify({ active: e })
      localStorage.active = str
      if (localStorage.addr == undefined || localStorage.addr == '') {
        this.sheng = sessionStorage.province
        this.shi = sessionStorage.city
        this.qu = sessionStorage.discrect
        this.addrInfo = this.sheng + ',' + this.shi + ',' + this.qu
      } else {
        this.addrInfo = JSON.parse(localStorage.addr).addr
      }
      if (this.active == 0) {
        listServiceXiangmu({
          ADDRESS: this.addrInfo,
          PAGE: 0,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
        this.value1 = 0
        this.value2 = 'a'
        this.addrInfo = ''
      } else if (this.active == 1) {
        listPeople({
          ADDRESS: this.addrInfo,
          PAGE: 0,

          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
        this.value1 = 0
        this.value2 = 'a'
        this.addrInfo = ''
      }
    },
    aa () {
      var active = localStorage.active
      var id = this.$route.query.userid
      var str = JSON.stringify({ uid: id })
      localStorage.uid = str
      if (localStorage.addr == undefined || localStorage.addr == '') {
        this.sheng = sessionStorage.province
        this.shi = sessionStorage.city
        this.qu = sessionStorage.discrect
        this.addrInfo = this.sheng + ',' + this.shi + ',' + this.qu
      } else {
        this.addrInfo = JSON.parse(localStorage.addr).addr
      }
      console.log(active)
      if (active == undefined) {
        this.active = 0
      } else {
        this.active = JSON.parse(active).active
      }
      if (this.active == 0) {
        listServiceXiangmu({
          ADDRESS: this.addrInfo,
          PAGE: 0,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
      } else if (this.active == 1) {
        listPeople({
          ADDRESS: this.addrInfo,
          PAGE: 0,
          STATUS: 1
        }).then((res) => {
          console.log(res)
          this.vshow = res
        })
      }
    }
  },
  mounted () {
    document.body.style.backgroundColor = '#FAF9FE'
    window.addEventListener('scroll', this.scrollToTop)
  },
  created () {
    document.title = ''
    this.aa()
  }

}
</script>
<style scoped>
.home {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
}
.xs img {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0px auto;
  margin-top: -5px;
  margin-bottom: 5px;
}
.xs {
  /* background-color: #fff; */
  z-index: 2;
}
.about {
  position: relative;
}
.head {
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0px;
}
.top {
  width: 92%;
  height: 44px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top img {
  width: 7px;
  height: 13px;
  margin-right: 5px;
  margin-top: 5px;
}
.top2 {
  /* display: flex;
     justify-content:space-between;
     align-items:center; */
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}
.main1 {
  margin-top: 88px;
  margin-bottom: 50px;
}
.choes {
  width: 33.3%;
  height: 44px;
  text-align: center;
  display: flex;
  align-items: center;
}
.choes .p {
  width: 100%;
  border-right: 1px solid #e5e5e5;
  text-align: center;
  margin: 0px auto;
  font-size: 16px;
  font-weight: 600;
}
.top2 img {
  width: 8px;
  height: 4.5px;
  margin-left: 5px;
  margin-bottom: 3px;
}
.change {
  color: #1da4f2;
}
.main {
  width: 100%;

  background-color: #fff;
  margin-bottom: 5px;
}
.fath {
  width: 92%;
  height: 120px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left img {
  width: 60px;
  height: 60px;
  /* margin-left: 15px; */
}
h3,
p {
  margin: 0px;
}
.center {
  width: 180px;
}
.sxaa {
  z-index: 9999;
}
.ssx {
  display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
}
.center p {
  font-weight: 500;
  font-size: 15px;
  color: #666666;
}
.center span {
  margin-right: 15px;
}
.right {
  text-align: right;
}
.right p {
  width: 72px;
  font-size: 15px;
  color: #1da4f2;
}
.right span {
  font-size: 10px;
  font-weight: normal;

  color: #999999;
}
/deep/.van-dropdown-menu__bar {
  box-shadow: none;
  background-color: rgba(29, 164, 242, 0.1);
}
</style>
